import { defineComponent, onMounted, reactive, ref } from "vue";
import styles from "./configuration.module.less";
import { PlusOutlined } from "@ant-design/icons-vue";
import to from "await-to-js";
import { $upload } from "@/apis/common/upload/upload";
import { message } from "ant-design-vue";
import { $miniprogramSetting, $miniprogramSettingInfo } from "@/apis/miniprogram/miniprogram";
import _ from "lodash";

export default defineComponent({
  name: 'configuration',
  setup() {
    const formRef = ref(null as any);
    const btning = ref(false);
    const state = reactive({
      configId: null,
      form: {
        mobile: null,
        carouselImg: [],
      },
      loading: false,
    } as any);

    const getDetail = async () => {
      const [err, res]: any = await to($miniprogramSettingInfo({
        configKey: 'miniprogram.setting'
      }))
      if (!err) {
        state.configId = res.data?.data?.configId || null;
        try {
          let obj = JSON.parse(res.data.data.configValue);
          state.form.mobile = obj.mobile;
          state.form.carouselImg = obj.carouselImg;
        } catch (err) {
          
        }
      }
    }

    //手动上传
    const upload = async (file) => {
      const formData = new FormData();
      formData.append("file", file);
      const [err, res]: any = await to($upload(formData))
      if (err) {
        return
      }
      state.form.carouselImg.push({ url: res?.data?.ossUpload?.fileUrl })
      message.success('上传图片成功');
      return false
    }

    const remove = (file) => {
      let idx = _.findIndex(state.form.carouselImg, function (o) { return o.url == String(file.url); })
      console.log(idx);
      state.form.carouselImg.splice(idx, 1)
    }

    const submit = async () => {
      state.loading = true;
      btning.value = true;
      let params: any = {
        "configKey": "miniprogram.setting",
        "configValue": JSON.stringify(state.form)
      };
      state.configId && (params.configId = state.configId)
      console.log(params);
      const [err, res]: any = await to($miniprogramSetting(params));
      if (!err) {
        message.success('上传成功');
        getDetail();
      }
      btning.value = false;
      state.loading = false;
    }
    onMounted(() => {
      getDetail();
    })
    return () => (
      <div class={styles.configuration}>
        {
          state.loading ? <div class={styles.loading}>
            <a-spin size="large" tip="加载中" />
          </div> : <div class={styles.container}>
            <div class={styles.formBox}>
              <a-form style={{ width: "100%" }} ref={formRef} model={state.form} label-col={{ style: { width: '130px', marginRight: '10px' } }} wrapper-col={{ span: 28 }}>
                <a-form-item required label="客服电话" name="mobile">
                  <a-input v-model:value={state.form.mobile} placeholder="请输入版本名" />
                </a-form-item>
                <a-form-item required label="轮播图" name="carouselImg">
                  <div class={styles.upload}>
                    <a-upload
                      file-list={state.form.carouselImg}
                      list-type="picture-card"
                      max-count={9}
                      before-upload={upload}
                      onRemove={(file) => remove(file)}
                      class={styles.uploadDemo}
                    >
                      <div class={styles.uploadBox}>
                        <PlusOutlined class={styles.icon} />
                      </div>
                    </a-upload>
                  </div>
                </a-form-item>
              </a-form>
            </div>
            <div class={styles.footer}>
              <a-button type="primary" loading={btning.value} onClick={() => { submit() }}>确定</a-button>
            </div>
          </div>
        }
      </div>
    )
  }
})